<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="with-pre-select" prop="userName" label="会员账户">
        <el-input placeholder="请输入账户名" v-model="form.userName" class="input-with-select" @keyup.enter.native="submitFilterForm">
        </el-input>
      </el-form-item>
      <el-form-item class="with-pre-select" prop="parentName"  label="所属上级">
        <el-input placeholder="请输入所属上级" v-model="form.parentName" class="input-with-select" @keyup.enter.native="submitFilterForm">
        </el-input>
      </el-form-item>
      <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" prop="parentName"  label="数据类型">
        <el-select v-model="form.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>
        <el-button @click="selfResetForm('refForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column label="用户名" prop="userName" width="180" align="center">
      </el-table-column>
      <el-table-column prop="parentName" label="所属上级" align="center"></el-table-column>
      <el-table-column prop="rechargeAmount" label="充值总额" align="center">
        <template slot-scope="{row}">
          {{row.rechargeAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column prop="rechargeCnt" label="充值单数" align="center">
        <template slot-scope="{row}">
          {{row.rechargeCnt}}
        </template>
      </el-table-column>
      <el-table-column prop="withdrawAmount" label="提现总额" align="center">
        <template slot-scope="{row}">
          {{row.withdrawAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column prop="withdrawCnt" label="提现单数" align="center">
        <template slot-scope="{row}">
          {{row.withdrawCnt}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        bordered
        layout="total, sizes, prev, next"
        :disabled="loading"
        @size-change="cursorGridSizeChange"
        @prev-click="cursorPrevClickChange"
        @next-click="cursorNextClickChange"
        :current-page="filters.page" :page-sizes="gridPageSize"  :page-size="filters.size"
        :total="tableData.total">
      </el-pagination>
      <!--<el-pagination background-->
                     <!--@size-change="cursorGridSizeChange"-->
                     <!--@prev-click="cursorPrevClickChange"-->
                     <!--@next-click="cursorNextClickChange"-->
                     <!--@size-change="gridSizeChange" -->
                     <!--@current-change="_gridCurrentChange"-->
                     <!--:current-page="form.cursor" -->
                     <!--:page-sizes="gridPageSize" -->
                     <!--:page-size="form.size"-->
                     <!--:layout="gridLayout" :total="tableData.total">-->
      <!--</el-pagination>-->
    </div>
  </div>
</template>


<script>
  import {getRechargeWithdrawDetailApi as listApi,exportRechangeWithdraw} from "@/services/api/operational";
  import {grid,pickerOption,handleDownload} from '@/build'


  export default {
    name: "recharge-withdraw-detail",
    mixins: [grid,pickerOption,handleDownload],
    props:['time','isFake'],
    data() {
      let timeRange = this.time || ['',''];
      let times = _.toPeriod({
        start: [-1, 'days'],
        end: [0, 'days'],
        format: 'YYYY-MM-DD'
      });
      times.startTime = timeRange[0]?timeRange[0]:times.startTime;
      times.endTime = timeRange[1]?timeRange[1]:times.endTime;
      return {
        tableData: [],

        form: {
          time: [times.startTime, times.endTime],
          parentName: null,
          userName: null,
          isFake: this.isFake||0,
        },
        filters: {
          stime: moment(times.startTime).valueOf(),
          etime: moment(times.endTime).valueOf()+ 86399999,
          cursor: 0,
          size: 10,
          export:undefined,
          isFake: this.isFake||0,
        },
        filterDateType: false,
      }
    },
    methods: {
      _gridCurrentChange(val) {
        this.filters.cursor = val;
        this.doGet({action: 'getGrid'});
      },
      selfResetForm(formName){
        this.resetForm(formName);
        this.submitFilterForm();
      },
      submitFilterForm() {
        const {time,userName ,parentName,isFake} = this.form;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf()+ 86399999;
        }
        this.filters = {...this.filters,isFake,userName,parentName, stime, etime, project: consts.PLATFROM_PREFIX}
        this.doGet({action: 'getGrid'});
      },
      exportHandle() {
        const {time,userName ,parentName,isFake} = this.form;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf()+ 86399999;
        }
        let ajaxData = {...this.filters,isFake,userName,parentName, stime, etime, project: consts.PLATFROM_PREFIX}
        let filename = '充值提现明细报表.csv';
        let header = ['用户名', '所属上级', '充值总额','充值单数','提现总额', '提现单数']
        let filterField = ['userName', 'parentName', 'rechargeAmount','rechargeCnt', 'withdrawAmount', 'withdrawCnt']
        exportRechangeWithdraw(ajaxData).then(([result, data]) => {

        if (result) {
            let exportData = this.responseFormatter(data.list);
            this.export2Excel(header, filterField, exportData, filename)

          } else {
            this.$message({message: '导出失败,' + data.message, type: "warning"})
          }
        })
      },
       responseFormatter(data) {
        data.map(item => {
          item.rechargeAmount = _.currency(item.rechargeAmount)
          item.withdrawAmount = _.currency(item.withdrawAmount)
          item.rechargeCnt = item.rechargeCnt
          item.withdrawCnt = item.withdrawCnt
        })

        return data
      },
    },
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG,{content:_.getContent(this.$route,'充值提现明细',true)});
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        // format: data => {
        //   let result = [];
        //   _.forIn(data, (value, key) => {
        //     result.push({...value, date: key, regRate: _.formatDiv(value.reg, (value.ip + value.reg), {fixed: 2})})
        //   })
        //   return result;
        // }
      });
      this.submitFilterForm();
    }

  }
</script>

<style scoped>

</style>
